<template>
	<view class="jk-page-container bg">
        <jkSearchBar
            :search-val.sync="searchParams.machineNameOrCode"
            :searchLeftItemName="searchParams.workshopName"
            :searchRightItemName="searchParams.processName"
            placeholder="设备编号"
            @search="onSearchBtn"
            @search-left-item="selectWorkshopPopupOptionState = true"
            @search-right-item="selectProcessPopupOptionState = true"
        ></jkSearchBar>
		<view class="column-list-container">
			<view v-for="(item) in tableData" :key="item.id" class="column-list-item">
				<view class="column-list-item-default flex-between-center">
					<view class="flex-start-center">
						<view class="column-list-item-title">{{ item.machineName }}</view>
						<open-state-bar :status="item.openingState"></open-state-bar>
					</view>
					<view class="column-list-item-sub-title">
						<u-button size="mini" type="text" @click="onCancelBtn(item)">取消开台</u-button>
						<!--<open-state-bar :status="item.openingState"></open-state-bar>-->
					</view>
				</view>
				<view class="column-list-item-default column-list-item-sub-title">生产品种：{{ item.productName }}</view>
				<view class="column-list-item-default column-list-item-sub-title">通知单号：{{ item.prdNoticeCode }}</view>
				<view class="column-list-item-default column-list-item-sub-title">生产批号：{{ item.batchCode }}</view>
				<view style="font-weight: 300;">
					<u-button @click="onToCloseBtn(item)" type="text" size="normal">了机</u-button>
				</view>
			</view>
			<jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
		</view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            :show-all="false"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.processCode"
            :show="selectProcessPopupOptionState"
            :optionList="processList"
            :option-id-key-name="'code'"
            @visible-change="(e) => selectProcessPopupOptionState = e"
            @confirm="onConfirmOfSelectProcess"
        ></jkPopupOption>
	</view>
</template>

<script>
	import {
		productionPrdNoticeMachineChangePage,
		productionPrdNoticeMachineClearOpeningOpening,
		spinProcessPage,
		systemAuthGetPermissionInfo,
	} from "../../../api";
	import {
		isLastPage,
		pageConfig,
		showLoading
	} from "../../../utils/jk-utils";
	import loadingMore from '../../../mixins/loading-more';
	import jkNoMore from "../../../jk-components/jk-no-more";
	import jkSearchBar from "../../../jk-components/jk-search-bar";
	import openStateBar from "../openMachine/open-state-bar";
    import jkPopupOption from "../../../jk-components/jk-popup-option";
	export default {
		mixins: [loadingMore],
		components: {
            jkPopupOption,
            jkNoMore,
			jkSearchBar,
			openStateBar
		},
		data() {
			return {
				apiConfig: {
					list: productionPrdNoticeMachineChangePage
				},
				searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					totalCount: pageConfig.totalCount,
					machineNameOrCode: '',
					workshopId: null,
					workshopName: '',
					processCode: 'XS',
					processName: '',
					openingState: 3
				},
                selectWorkshopPopupOptionState: false,
                selectProcessPopupOptionState: false,
                tableData: [],
				workshopList: [],
				processList: []
			}
		},
		onLoad() {
		},
		onShow() {
            this.processList = getApp().globalData.defaultProcess.list;
            this.getDependentData();
		},
		methods: {
            onConfirmOfSelectProcess(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'processCode', item.code);
                this.$set(this.searchParams, 'processName', item.name);
                this.selectProcessPopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
			onCancelBtn(item) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: "确定'取消开台'吗?",
					success: function(res) {
						if (res.confirm) {
							productionPrdNoticeMachineClearOpeningOpening({}, {
								prdNoticeMachineChangeId: item.id
							}).then(res => {
								if (res.data.status === 200) {
									_this.getListRequest();
								}
							});
						}
					}
				});
			},
			onClearOfSearchIpt() {
				this.$set(this.searchParams, 'machineNameOrCode', '');
				this.onSearchBtn();
			},
			onToCloseBtn({id}) {
				uni.navigateTo({
					url: `/pages/production/closeMachine/toClose?id=${ id }`
				})
			},
			onSearchBtn(e) {
				this.tableData = [];
				this.$set(this.searchParams, 'machineNameOrCode', e);
				this.getListRequest();
			},
			getProcessListRequest() {
				return spinProcessPage({
					auditState: 1
				}).then(res => {
					if (res.data.status === 200) {
						let item = res.data.res.find(x => x.code.toUpperCase() === 'XS');
						if (item) {
							this.$set(this.searchParams, 'processCode', item.code);
							this.$set(this.searchParams, 'processName', item.name);
						}
						this.processList = res.data.res;
					}
				});
			},
			getWorkshopDataRequest() {
				return systemAuthGetPermissionInfo().then(res => {
					if (res.data.status === 200) {
						if (!this.searchParams.workshopId) {
							this.$set(this.searchParams, 'workshopId', res.data.res.workshop.defaultWorkshopId);
							this.$set(this.searchParams, 'workshopName', res.data.res.workshop
							.defaultWorkshopName);
						}
						this.workshopList = getApp().globalData.defaultWorkshop.list;
					}
				})
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
				await this.getWorkshopDataRequest();
				if (this.searchParams.workshopId) await this.getListRequest();
				showLoading(false);
			},
			getListRequest() {
				if (this.searchParams.workshopId) {
					showLoading(true);
                    this.searchParams.pageNo = 1;
                    let params = JSON.parse(JSON.stringify(this.searchParams));
                    delete params.workshopName;
                    delete params.workshopCode;
                    delete params.processName;
                    delete params.totalCount;
					return this.apiConfig.list(this.searchParams).then(res => {
						showLoading(false);
						if (res.data.status === 200) {
							this.$set(this.searchParams, 'totalCount', res.data.count);
							this.tableData = res.data.res;
							this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize,
								this.searchParams.pageNo);
						}
					})
				}
			}
		},
		onReachBottom() {
			this.getMore();
		}
	}
</script>

<style lang="scss" scoped>
</style>
